* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
.box {
    background-color: #efefef;
    // height: 100vh;
    width: 100vw;
    /* vh 相对单位，参考视口的高度，100vh就是一个视口的高度 */
    height: 100vh;
    display: flex;
    flex-direction: column;
    .head {
        width: 100%;
        height: 88px;
        background-color: #ffffff;
        box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.28);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .head1 {
            margin-left: 56px;
            span {
                margin-left: 22px;
                font-size: 22px;
                color: #4b4b4b;
            }
        }
        .head2 {
            display: flex;
            align-items: center;
            .user {
                display: flex;
                align-items: center;
                margin-right: 12px;
                span {
                    padding: 0 9px;
                }
            }
            a {
                color: #777777;
                padding: 0 12px;
                border-left: 2px solid #d0d0d0;
                font-size: 16px;
            }
        }
    }
    .mid {
        margin-top: 16px;
        display: flex;
        overflow: hidden;
        flex: 1;
        .aside {
            flex-shrink: 0;
            width: 240px;
            margin-right: 16px;
            height: 100%;
            // overflow: scroll;
            background-color: #ffffff;
            box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.28);
            border-radius: 0px 8px 0px 0px;
            padding-top: 10px;
            .system-list {
                li {
                    line-height: 70px;
                    height: 70px;
                    width: 100%;
                    font-size: 20px;
                    border-bottom: 1px solid #f3f3f3;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    &.second-list {
                        display: none;
                        height: 55px;
                        line-height: 55px;
                        a {
                            width: 208px;
                            margin-left: 32px;
                            // background-color: #f8e8e8;
                            border-radius: 6px 0px 0px 6px;
                        }
                        a.active {
                            border-right: 5px solid #bc0108;
                            background-color: #f8e8e8;
                        }
                    }
                    a {
                        color: #4b4b4b;
                        display: block;
                        padding-left: 76px;
                        // text-align: center;
                        width: 100%;
                        height: 100%;
                        text-decoration: none;
                    }
                    img {
                        position: absolute;
                        &:first-child {
                            left: 36px;
                            top: 24px;
                        }
                        &:last-child {
                            right: 45px;
                            top: 30px;
                        }
                    }
                    a.active {
                        color: #bc0108;
                    }
                }
            }
        }
        .content {
            flex: 1;
            // height: 976px;
            // min-width: 600px;
            background-color: #ffffff;
            box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, 0.28);
            border-radius: 8px 0px 0px 0px;
            overflow-y: scroll;
            // overflow-x: scroll;

            padding: 38px 32px;
            #home {
                .row {
                    margin-top: 30px;
                }
                .card1 {
                    > div {
                        // height: 133px;
                        // min-width: 311px;
                        background-color: #ffffff;
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        padding: 20px;
                        .b1 {
                            display: flex;
                            justify-content: space-between;
                            span {
                                font-size: 16px;
                                color: #4b4b4b;
                                padding: 0 4px;
                                border-left: 4px solid #bc0108;
                            }
                            a {
                                text-align: center;
                                width: 40px;
                                height: 18px;
                                background-color: #bc0108;
                                border-radius: 2px;
                                font-size: 12px;
                                color: white;
                            }
                        }
                        .b2 {
                            margin-top: 30px;
                            display: flex;
                            justify-content: space-between;

                            P {
                                font-size: 20px;
                                color: #4b4b4b;
                                font-weight: bold;
                                margin: 0;
                                span {
                                    font-size: 32px;
                                }
                            }
                            div {
                                display: flex;
                                // justify-content: center;
                                align-items: center;
                                span {
                                    font-size: 12px;
                                    color: #4b4b4b;
                                }
                            }
                        }
                    }
                }
                .card2 {
                    > div {
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        img {
                            width: 100%;
                        }
                    }
                }
                .card3 {
                    > div {
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
            #dingdan {
                .row {
                    margin-top: 30px;
                    .dd1 {
                        width: 100%;
                        font-size: 20px;
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        div {
                            display: flex;
                            padding-right: 38px;
                            input,
                            select {
                                width: 216px;
                                // width: 100%;
                                height: 38px;
                                outline: none;
                                font-size: 14px;
                                color: #999999;
                                padding-left: 14px;
                            }
                            select {
                                background-color: #f1f1f1;
                            }
                            .t1 {
                                margin-left: 20px;
                                margin-top: 20px;
                                tr {
                                    td {
                                        // padding-top: 20px;
                                        &:first-child {
                                            text-align: right;
                                        }
                                    }
                                }
                            }
                            .u1 {
                                margin-left: 134px;
                                margin-top: 86px;
                                flex: 1;
                                li {
                                    margin-top: 20px;
                                    &:nth-child(n + 2) {
                                        display: flex;
                                        justify-content: space-between;
                                    }
                                }
                            }
                        }
                        p {
                            text-align: center;
                            margin-top: 30px;
                            margin-bottom: 34px;
                            button {
                                &:first-child {
                                    background-color: #bc0108;
                                    color: white;
                                }
                                width: 120px;
                                height: 38px;
                                border-radius: 4px;
                                border: 0;
                                margin-left: 15px;
                            }
                        }
                    }
                    .dd2 {
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        padding-bottom: 17px;
                        div {
                            line-height: 80px;
                            a {
                                font-size: 16px;
                                padding: 0 20px;
                                color: #636363;
                                border-left: 1px solid #e1e1e1;
                                &:first-child {
                                    border: 0;
                                    color: #bc0108;
                                }
                            }
                        }
                        p {
                            height: 50px;
                            line-height: 50px;
                            background-color: #f5d9da;
                            span {
                                font-size: 16px;
                                padding: 0 90px;
                                color: #bc0108;
                            }
                        }
                        h1 {
                            display: flex;
                            justify-content: center;
                            margin-top: 45px;
                        }
                        i {
                            font-size: 14px;
                            font-style: normal;
                            label {
                                margin-left: 8px;
                            }
                            button {
                                margin: 0 12px;
                                width: 80px;
                                height: 28px;
                                background-color: #f1f1f1;
                                border-radius: 4px;
                                border: 0;
                            }
                        }
                    }
                }
            }
            #tianjiachanpin {
                > .row {
                    margin-top: 30px;
                    > div {
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        .uuu1 {
                            width: 100%;
                            font-size: 20px;
                            margin-top: 30px;
                            margin-left: 20px;
                            border-right: 1px solid #cacaca;
                            padding-right: 45px;
                            li {
                                display: flex;
                                line-height: 50px;
                                justify-content: space-between;
                                align-items: center;
                                color: #4b4b4b;
                                input {
                                    flex: 1;
                                    height: 38px;
                                    outline: none;
                                }
                                span {
                                    font-weight: bold;
                                }
                                button {
                                    width: 120px;
                                    height: 38px;
                                    margin-left: 20px;
                                    margin-right: 9px;
                                    line-height: 38px;
                                    background-color: #bc0108;
                                    border-radius: 4px;
                                    border: 0;
                                    color: white;
                                }
                            }
                        }
                        .uuu2 {
                            margin-top: 34px;
                            display: flex;
                            flex-direction: column;
                            li {
                                font-size: 20px;
                                &:first-child {
                                    button {
                                        &:first-child {
                                            color: #fff;
                                            background-color: #bc0108;
                                        }
                                        border: 0;
                                        width: 80px;
                                        height: 38px;

                                        border-radius: 4px;
                                    }
                                }
                                &:nth-child(2) {
                                    flex: 1;
                                    margin-top: 17px;
                                    margin-bottom: 31px;
                                    span {
                                        color: #4b4b4b;
                                    }

                                    // width: 720px;
                                    // height: 443px;
                                    line-height: 443px;
                                    text-align: center;
                                    border: 2px dashed #cacaca;
                                }
                                &:nth-child(3) {
                                    display: flex;
                                    span {
                                        // display: block;
                                        width: 180px;
                                        margin-right: 30px;
                                        height: 160px;
                                        line-height: 160px;
                                        text-align: center;
                                        border: solid 2px #cacaca;
                                    }
                                }
                                &:nth-child(4) {
                                    text-align: right;
                                    button {
                                        &:first-child {
                                            color: #fff;
                                            background-color: #bc0108;
                                        }
                                        width: 120px;
                                        height: 38px;
                                        border-radius: 4px;
                                        border: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            #chanpinliebiao {
                > span {
                    font-size: 18px;
                }
                .hhhhhh {
                    display: flex;
                    align-items: center;
                    font-size: 20px;
                    padding-bottom: 38px;
                    padding-top: 38px;
                    border-bottom: 3px solid #e3e3e3;
                    a {
                        display: flex;
                        margin-right: 30px;
                        width: 133px;
                        height: 38px;
                        background-color: #bc0108;
                        border-radius: 4px;
                        font-size: 20px;
                        color: white;
                        justify-content: space-evenly;
                        align-items: center;
                    }
                    input {
                        margin-right: 30px;
                    }
                    button {
                        width: 80px;
                        height: 38px;
                        background-color: #bc0108;
                        border-radius: 4px;
                        border: 0;
                        color: white;
                    }
                }
                .row {
                    margin: 0;
                    margin-top: 36px;
                    > div {
                        padding: 0;
                        // height: 300px;
                        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);
                        border-radius: 4px;
                        border-top: 5px solid #bc0108;
                        table {
                            width: 100%;
                            text-align: center;
                            tr {
                                line-height: 80px;
                                &:nth-child(2n-1) {
                                    background-color: #f6f6f6;
                                }
                                a {
                                    padding: 0 5px;
                                    color: #bc0108;
                                    border-left: 1px solid #828282;
                                    &:first-child {
                                        border: 0;
                                    }
                                }
                            }
                        }
                    }
                }
                > p {
                    text-align: right;
                    margin-top: 29px;
                    letter-spacing: 2px;
                    input {
                        width: 33px;
                        height: 22px;
                        border-radius: 4px;
                        border: solid 1px #4b4b4b;
                    }
                }
            }
        }
    }
}
